<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            min-height: 100vh;
            display: grid;
            justify-content: center;
            align-content: center;
            font-family: -apple-system, sans-serif;
            line-height: 2;
            background: #ffc600;
        }
        
        .wrapper {
            width: 400px;
            height: 80vh;
            padding: 20px;
            border: 1px solid black;
            background-color: white;
            display: grid;
            /*1fr 有什么用？ flex 1 有什么？ 
      flex: 1给一个元素设置？  可以让这个元素成为主元素？ 
      其它元素把该占的占了， 余下所有都归1 
      flex  flex-direction:column; flex: 1  height: 1

    */
            grid-template-rows: 1fr auto;
            /* grid-template-columns: 100px; */
        }
        
        .terms-and-conditions {
            /*高度 overflow:scroll 居中  */
            overflow: scroll;
            -webkit-overflow-scrolling: touch;
        }
        
        button {
            background: #ff0060;
            color: white;
            font-size: 1rem;
            padding: 20px;
            transition: all 0.2s;
        }
        
        button[disabled] {
            opacity: 0.1;
            transform: translateX(-200%) scale(0.5);
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="terms-and-conditions">
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste, labore!</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum assumenda, ullam, sed quo ipsam officia asperiores minima excepturi eveniet reiciendis velit debitis temporibus explicabo. Incidunt sit itaque, reprehenderit fuga voluptatem officiis
                corrupti ipsa eveniet architecto dolorem magni facere doloribus aut veritatis sequi quia repellendus aperiam assumenda exercitationem optio praesentium debitis. Excepturi unde minus dignissimos at totam tempora beatae cumque, voluptates
                adipisci repudiandae asperiores repellat delectus tempore voluptatem veritatis atque quaerat optio! Quasi, possimus molestiae hic modi quia minus eius veniam aperiam assumenda fugiat fugit optio odio quas esse quam architecto officiis
                sunt quis cupiditate vel voluptate consequuntur nam porro harum. Fuga distinctio voluptate provident molestias perspiciatis fugit esse corrupti adipisci quas eos dolor non cum ipsam repudiandae dolorem, quasi necessitatibus iusto unde
                similique repellendus praesentium tenetur? Obcaecati aliquam nostrum vero expedita fuga, quae et quaerat modi error adipisci eligendi fugit alias quia nihil laudantium quam tenetur ipsam explicabo nisi natus, rerum omnis, debitis provident!
                Dolorum sequi recusandae, necessitatibus eos nesciunt cupiditate accusantium illum unde minima. Labore sit quos voluptatem illum qui. Veritatis quis a mollitia asperiores repudiandae consequatur assumenda, at tempora, modi voluptate sit
                blanditiis hic dignissimos harum consequuntur quia ipsam, architecto nesciunt. Praesentium, mollitia? Delectus quod laudantium doloremque nihil?</p>
            <strong class="watch">watch for me</strong>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quos ab, ea inventore commodi eligendi error repellat impedit eum quod enim sequi, distinctio, qui eaque ipsam fugit asperiores eos laboriosam ex.</p>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsa id debitis ex eligendi rem unde consequuntur natus omnis vel nulla sit commodi, quos distinctio doloremque doloribus veniam quis et dolore?</p>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Commodi laboriosam nulla est architecto eum, dolorem quam, unde quo fugit tempore ipsa qui provident, iste ratione quis dignissimos temporibus nostrum voluptatum molestias? Blanditiis
                repellendus sapiente inventore aliquam qui error aliquid doloremque fugit consequuntur laudantium. Sapiente doloribus ullam vel dicta doloremque iure, deleniti ipsum non. Rem repudiandae deleniti ad at laborum eaque, modi voluptas aut!
                Quam nihil deleniti velit excepturi, quidem, veniam aut doloremque iure reprehenderit natus vel quia iusto? Magni veritatis provident libero hic quisquam, perferendis officia quasi molestiae sit sunt fugiat, perspiciatis architecto velit
                unde molestias ratione totam, atque doloremque!</p>
        </div>
        <button class="accept" disabled>Accept</button>
    </div>
    <script>
        // 滚动条滚动到底， 没有这个事件 就让button可勾选
        const terms = document.querySelector('.terms-and-conditions');
        const watch = document.querySelector('.watch');
        const button = document.querySelector('.accept');
        // button.removeAttribute('disabled');
        //  给我们监听视窗的能力 某个元素是否在视窗中 Observer
        // 实例化了一个oberver 
        function obCallback(payload) {
            // console.log(payload);
            // 进入了视窗
            console.log(payload[0].intersectionRatio)
            if (payload[0].intersectionRatio > 0) {
                console.log('---------')
                button.disabled = false; // 启动元素
                // button.removeAttribute('disabled');
                ob.unobserve(terms.lastElementChild)
            }
            // button.removeAttribute('disabled');
        }
        const ob = new IntersectionObserver(obCallback, {
            root: terms,
            // 什么时候触发回调函数  0 从视窗消失  1 进入视窗
            threshold: 1
        });
        ob.observe(terms.lastElementChild);
    </script>
</body>

</html>